<script setup lang="ts">
import { provide, ref } from 'vue';
import HmButton from './components/HmButton.vue';
import SonCom from './components/SonCom.vue'
import HmNavbar from './components/HmNavbar.vue';

// 父组件传递回调函数给子组件，子组件触发回调函数
const myEvent = (age: number) => {
  console.log('子组件触发回调函数', age)
}

const getName = (name: string) => {
  console.log('子组件触发回调函数', name)
}

const totalCount = ref(100)
// 1. provide 函数类似鸿蒙的 @Provide 装饰器，祖先提供数据
provide('totalCount', totalCount)

provide('updateTotalCount', (num: number) => {
  totalCount.value += num
})

const appTitle = ref('应用标题')
const leftClick = (val: string) => {
  alert(val)
}
</script>

<template>
  <HmNavbar v-bind:title="appTitle" @left-click-handler="leftClick">
    <button>新按钮</button>
  </HmNavbar>
  <h1>App 根组件</h1>
  <!-- 
    父传子：通过 v-bind: 和 defineProps 传递数据
    子传父：通过 v-on: 和 defineEmits 传递数据（传回调函数给子组件调用）
  -->
  <h1>根组件 totalCount：{{ totalCount }}</h1>
  <button @click="totalCount++">修改数据+1</button>
  <SonCom :name="'张三'" :age="18" @my-event="myEvent($event)" @get-name="getName($event)" />
  <SonCom :name="'李四'" :age="20" @my-event="myEvent" @get-name="getName" />
  <!-- 父传子，text 为可选参数 -->
  <HmButton :text="'登录'" />
  <HmButton :text="'注册'" />
  <HmButton />
</template>